import { group } from 'console';
import { AxesHelper, BoxBufferGeometry, BufferGeometry, CameraHelper, DoubleSide, FileLoader, Group, Mesh, MeshBasicMaterial, OrthographicCamera, Scene, Shape, ShapeGeometry, SplineCurve, Vector2, Vector3, WebGLRenderer } from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 经纬度转球面坐标
import { lon2xyz } from './math';
export class Application {
    private scene!: Scene;
    private camera!: OrthographicCamera;
    private webglRenderer!:WebGLRenderer;
    private axesHelper !: AxesHelper;
    constructor() {
        // 场景 
        this.scene = new Scene();
        // 相机
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 100; //三维场景缩放系数
        this.camera = new OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        this.camera.position.set(200, 200, 200);
        this.camera.lookAt(new Vector3(0, 0, 0));
        // 渲染器
        this.webglRenderer = new WebGLRenderer({ antialias:true });
        this.webglRenderer.setSize(window.innerWidth, window.innerHeight);
        this.webglRenderer.setPixelRatio(window.devicePixelRatio);
        this.webglRenderer.setClearColor(0xffffff);
        document.body.appendChild(this.webglRenderer.domElement);

        const loader = new FileLoader();
        loader.setResponseType('json');
        const provinceGroup = new Group();

        loader.load('../assets/chinaGeo.json', data=>{
            data['features'].forEach(obj=>{
                if(obj.geometry.type=='Polygon'){
                    obj.geometry.coordinates = [obj.geometry.coordinates];
                }
                const polygonArr = [];
                obj.geometry.coordinates.forEach(polygon=>{
                    polygon[0].forEach(coord=>{
                            (<any>polygonArr).push(new Vector2(coord[0], coord[1]));
                    });
                });
                const mesh = this.createShape(polygonArr);
                provinceGroup.add(mesh);
            });            
            this.scene.add(provinceGroup);
            
        });

        // 坐标系
        this.axesHelper = new AxesHelper(500);
        this.scene.add(this.axesHelper);
        // 控制器
        new OrbitControls(this.camera, this.webglRenderer.domElement);
        // 页面变化
        window.addEventListener('resize', ()=>this.onWidowResize());
        // 渲染循环
        this.render();
    }
    private onWidowResize(){
        this.webglRenderer.setSize(window.innerWidth, window.innerHeight);
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 100; //三维场景缩放系数
        this.camera.left  = -s * k;
        this.camera.right  = s * k;
        this.camera.top  = s;
        this.camera.bottom  = -s;
        this.camera.updateProjectionMatrix(); //相机属性发生变化时更新投影矩阵
    }
    private render() {
        window.requestAnimationFrame(()=>this.render());
        this.webglRenderer.render(this.scene, this.camera);
        
    }

    private createShape(pointArr){
        const curve = new SplineCurve(pointArr);
        const points = curve.getPoints(100);
        const shape = new Shape(points);
        const geometry = new ShapeGeometry(shape);
        geometry.center();
        const material = new MeshBasicMaterial({
            color:'skyblue',
            side:DoubleSide
        });
        const mesh = new Mesh(geometry, material);
        return mesh;
    }
}